<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span
              @mousedown="loopZoom()"
              @mouseup="clearLoopZoom()"
            >个人信息</span>
          </div>
          <div>
            <ul class="user-info">
              <li><svg-icon icon-class="kehubianhao" /> 个人编号 <div class="user-right">{{ this.person_grbh }}</div></li>
              <li><svg-icon icon-class="qiahao" /> 卡号 <div class="user-right">{{ this.person_ybkh }}</div></li>
              <li><svg-icon icon-class="user" /> 姓名 <div class="user-right">{{ this.person_xm }}</div></li>
              <li><svg-icon icon-class="xingbie" /> 性别 <div class="user-right">{{ this.person_xb }}</div></li>
              <li><svg-icon icon-class="nianling" /> 年龄 <div class="user-right">{{ this.person_nl }}</div></li>
              <li><svg-icon icon-class="shenfenzheng" /> 身份证号 <div class="user-right">{{ this.person_sfz }}</div></li>
              <li><svg-icon icon-class="date" /> 出生日期 <div class="user-right">{{ this.person_csrq }}</div></li>
              <!--              <li><svg-icon icon-class="zhuangtai_2" /> 人员状态 <div class="user-right"></div></li>-->
              <li><svg-icon icon-class="quyu" /> 统筹区 <div class="user-right">{{ this.person_ybssqx }}</div></li>
              <li><svg-icon icon-class="sign" /> 参保类型 <div class="user-right">{{ this.person_cblx }}</div></li>
              <li><svg-icon icon-class="dengjizhongxin" /> 失能等级 <div class="user-right">{{ this.bis_zhsq_sndj }}</div></li>
              <li><svg-icon icon-class="datestart" /> 待遇开始日期 <div class="user-right">{{ this.bis_zhsq_dykkrq }}</div></li>
              <li><svg-icon icon-class="dateend" /> 待遇结束日期 <div class="user-right">{{ this.bis_zhsq_dyjsrq }}</div></li>
              <li><svg-icon icon-class="jiekuanqixian" /> 待遇期限 <div class="user-right">{{ this.bis_zhsq_xsdyq }}</div></li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
        <!--    用户资料    -->
        <el-card class="box-card">
          <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
          <div v-if="this.flag" style="margin-left: 20px;">
            <!-- 搜索 -->
            <el-input v-model="person_sfz" clearable size="small" placeholder="输入身份证号" style="width: 200px;" class="filter-item" @keyup.enter.native="testQuery" />
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="testQuery">搜索</el-button>
          </div>
          <div v-if="true" style="margin-left: 20px;margin-bottom: 10px;">
            <!-- 搜索 -->
            <el-radio-group v-model="radio4" size="mini" class="filter-item">
              <el-radio-button label="ReadCardBas" name="医保卡">医保卡</el-radio-button>
              <el-radio-button label="ReadSFZ" name="身份证">身份证</el-radio-button>
            </el-radio-group>
          </div>
          <el-button
            v-loading.fullscreen.lock="fullscreenLoading"
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-bank-card"
            @click="read"
          >
            读卡查询
          </el-button>

          <el-button
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="crud.toAdd"
          >
            入院登记
          </el-button>
          <!--表单组件-->
          <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="840px">
            <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="住院科室" prop="bisJzdjKsmc">
                    <el-select
                      v-model="form.bisJzdjKsmc"
                      style="width: 150px"
                      placeholder="选择住院科室"
                    >
                      <el-option
                        v-for="item in allHljgKs"
                        :key="item.bisHljgKsName"
                        :label="item.bisHljgKsName"
                        :value="item.bisHljgKsName"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="病室" prop="bisJzdjBs">
                    <el-input v-model="form.bisJzdjBs" style="width: 150px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="床位号" prop="bisJzdjCwh">
                    <el-input v-model="form.bisJzdjCwh" style="width: 150px;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="医生姓名" prop="bisJzdjYsxm">
                    <el-select
                      v-model="form.bisJzdjYsxm"
                      style="width: 150px"
                      placeholder="选择医生姓名"
                    >
                      <el-option
                        v-for="item in allHljgYs"
                        :key="item.bisHljgYsName"
                        :label="item.bisHljgYsName"
                        :value="item.bisHljgYsName"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="患者电话" prop="bisJzdjHzlxfs">
                    <el-input v-model="form.bisJzdjHzlxfs" style="width: 150px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="家属电话">
                    <el-input v-model="form.bisJzdjJslxfs" style="width: 150px;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="入院日期" prop="bisJzdjRyrq">
                    <el-date-picker v-model="form.bisJzdjRyrq" type="date" value-format="yyyy-MM-dd" format="yyyyMMdd" style="width: 150px;" @change="queryPersonFee()" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="警戒线">
                    <el-input v-model="form.bisJzdjJjx" style="width: 150px;" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="text" @click="crud.cancelCU">取消</el-button>
              <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
            </div>
          </el-dialog>
          <!--表格渲染-->
          <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="bisJzdjLsh" label="住院号" align="center" width="160px" />
            <el-table-column prop="bisJzdjYllb" label="医疗类别" align="center">
              <template slot-scope="scope">
                {{ dict.label.yllb[scope.row.bisJzdjYllb] }}
              </template>
            </el-table-column>
            <el-table-column prop="bisJzdjRyrq" label="入院日期" align="center" />
            <el-table-column prop="bisJzdjCyrq" label="出院日期" align="center" />
            <el-table-column prop="bisJzdjJbr" label="经办人" align="center" />
            <el-table-column prop="bisJzdjJbrq" label="经办日期" align="center" />
            <el-table-column prop="bisJzdjCyzt" label="是否在院" align="center">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.bisJzdjCyzt === '0' ? 'success' : 'warning'"
                  disable-transitions
                >{{ scope.row.bisJzdjCyzt === '0' ? '在院' : '出院' }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crudJzdj from '@/api/business/jzdj'
import { getZhid } from '@/api/business/zhsq'
import { queryAllHljgKs } from '@/api/business/hljgKs'
import { queryAllHljgYs } from '@/api/business/hljgYs'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import axios from 'axios'
import { mapGetters } from 'vuex'
import moment from 'moment'

const defaultForm = { bisJzdjId: null, bisJzdjZhsqId: null, bisJzdjLsh: null, bisJzdjYllb: null, bisJzdjRyrq: null, bisJzdjCyrq: null, bisJzdjRyjbbm: null, bisJzdjGhf: null, bisJzdjZcf: null, bisJzdjCyjbbm: null, bisJzdjJbr: null, bisJzdjJbrq: null, bisJzdjFph: null, bisJzdjCyzt: null, bisJzdjSpr: null, bisJzdjZcyymc: null, bisJzdjKsmc: null, bisJzdjBs: null, bisJzdjCwh: null, bisJzdjYsxm: null, bisJzdjHzlxfs: null, bisJzdjJslxfs: null, bisJzdjSfz: null, bisJzdjJylx: null, bisJzdjSpkssj: null, bisJzdjSpzzsj: null, ywlx: null, lrr: null, lrrxm: null, lrbm: null, lrbmmc: null, lrsj: null, gxr: null, gxrxm: null, gxbm: null, gxbmmc: null, gxsj: null, sfyx: null, bz: null, zhsq: { bisZhsqId: null }}
export default {
  name: 'Jzdj',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['fwcsxz', 'jglx', 'ccs', 'ccstcqh', 'yllb', 'zybs'],
  cruds() {
    return CRUD({ title: '就诊登记', url: 'api/jzdj', idField: 'bisJzdjId', sort: 'bisJzdjId,desc', crudMethod: { ...crudJzdj }})
  },
  data() {
    return {
      content: '读卡',
      istrue: false,
      defualtQuery: false,
      person_zhid: '',
      person_lxdh: '',
      person_jhrdh: '',
      person_xm: '',
      person_sfz: '',
      person_xb: '',
      person_nl: '',
      person_csrq: '',
      person_tx: '',
      person_grbh: '',
      person_ybkh: '',
      person_ybssqx: '',
      person_cblx: '',
      bis_zhsq_sndj: '',
      bis_zhsq_dykkrq: '',
      bis_zhsq_dyjsrq: '',
      bis_zhsq_xsdyq: '',
      allHljgKs: [],
      allHljgYs: [],
      fullscreenLoading: false,
      radio4: 'ReadCardBas',
      flag: false,
      sfjfFlag: false,
      firstTime: 0,
      lastTime: 0,
      timeOut: '',
      setIntervals: '',
      permission: {
        add: ['admin', 'jzdj:add'],
        edit: ['admin', 'jzdj:edit'],
        del: ['admin', 'jzdj:del']
      },
      rules: {
        bisJzdjRyrq: [
          { required: true, message: '入院日期不能为空', trigger: 'blur' }
        ],
        bisJzdjKsmc: [
          { required: true, message: '科室名称不能为空', trigger: 'blur' }
        ],
        bisJzdjBs: [
          { required: true, message: '病室不能为空', trigger: 'blur' }
        ],
        bisJzdjCwh: [
          { required: true, message: '床位号不能为空', trigger: 'blur' }
        ],
        bisJzdjYsxm: [
          { required: true, message: '医生姓名不能为空', trigger: 'blur' }
        ],
        bisJzdjHzlxfs: [
          { required: true, message: '患者联系方式不能为空', trigger: 'blur' }
        ],
        bisJzdjSpkssj: [
          { required: true, message: '审批开始时间不能为空', trigger: 'blur' }
        ],
        bisJzdjSpzzsj: [
          { required: true, message: '审批终止时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return this.defualtQuery
    },
    // 新增前将多选的值设置为空
    [CRUD.HOOK.beforeToAdd]() {
      this.queryAllHljgKs()
      this.queryAllHljgYs()
      this.defaultForm = []
      if (this.person_sfz === '') {
        this.$notify({
          title: '请先读取身份证信息',
          type: 'warning',
          duration: 2500
        })
        return false
      }

      let flag = false
      console.log('--+ : ', this.crud.data)
      this.crud.data.forEach(data => {
        const bisJzdjJylx = data.bisJzdjCyzt
        flag = bisJzdjJylx === '0' ? true : flag
      })
      if (flag) {
        this.$notify({
          title: this.person_xm + '已入院登记，请不要重复操作',
          type: 'warning',
          duration: 2500
        })
        return false
      }

      this.form.bisJzdjRyrq = new Date()
      this.form.bisJzdjCwh = '1'
      this.form.bisJzdjBs = '1'
      this.queryPersonFee()
    },
    // 新增编辑前做的操作
    [CRUD.HOOK.beforeToCU](crud, form) {
      this.form.bisJzdjHzlxfs = this.person_lxdh
      this.form.bisJzdjJslxfs = this.person_jhrdh
    },
    // 提交前做的操作
    [CRUD.HOOK.afterValidateCU](crud) {
      const ryrq = moment(this.form.bisJzdjRyrq).format('YYYY年MM月')
      if (this.sfjfFlag) {
        this.$notify({
          title: ryrq + '尚未缴费',
          type: 'warning',
          duration: 2500
        })
        return false
      }
      this.form.bisJzdjSfz = this.person_sfz
      this.form.bisJzdjZhsqId = this.person_zhid
      this.form.bisJzdjRyrq = moment(this.form.bisJzdjRyrq).format('YYYYMMDD')
      return true
    },
    // 获取所有机构科室
    queryAllHljgKs() {
      queryAllHljgKs().then(res => {
        this.allHljgKs = res
      }).catch(() => { })
    },
    // 获取所有机构医生
    queryAllHljgYs() {
      queryAllHljgYs().then(res => {
        this.allHljgYs = res
      }).catch(() => { })
    },
    loopZoom() {
      this.firstTime = new Date().getTime()
      this.timeOut = setTimeout(() => {
      }, 800)
    },
    queryPersonFee() {
      crudJzdj.queryPersonFee({ ryxx: this.person_grbh, djrq: this.form.bisJzdjRyrq }).then(res => {
        this.sfjfFlag = res.length === 0
      }).catch(() => { })
    },
    clearLoopZoom() {
      this.lastTime = new Date().getTime()
      if (this.lastTime - this.firstTime >= 2000) {
        this.flag = true
      }
      clearTimeout(this.timeOut)
      this.timeOut = ''
      clearInterval(this.setIntervals)
      this.setIntervals = ''
    },
    // 获取弹窗内评估公司数据
    read() {
      const that = this
      this.fullscreenLoading = true
      axios.get('http://127.0.0.1:19995?MSG=' + this.radio4).then(res => {
        console.log('res: {} ', res)
        this.fullscreenLoading = false
        const DllReturn = res.data.DllReturn
        if (this.radio4 === 'ReadCardBas') {
          const shbzkContent = res.data.pCardInfo
          if (DllReturn === '0') {
            const contentList = shbzkContent.split('|')
            this.person_sfz = contentList[1]
          } else {
            this.$notify({
              title: shbzkContent + '。请重新读卡',
              type: 'warning',
              duration: 2500
            })
            return
          }
        } else {
          const pOutBuff = res.data.pOutBuff
          if (DllReturn === '0') {
            this.person_sfz = pOutBuff.split('|')[0]
          } else {
            this.$notify({
              title: pOutBuff + '。请将身份证放入正确位置',
              type: 'warning',
              duration: 2500
            })
            return
          }
        }
        // that.person_sfz = that.user.username === '6002' ? '220104200110263322' : that.person_sfz

        getZhid({ sfz: that.person_sfz }).then(res => {
          console.log('getZhid:', res)
          if (res !== '') {
            that.defualtQuery = true
            that.person_sfz = res.bisZhsqSnrySfz
            that.person_xm = res.bisZhsqSnryXm
            that.person_xb = res.bisZhsqSnryXb
            that.person_nl = res.bisZhsqNl
            that.person_zhid = res.bisZhsqId
            that.person_lxdh = res.bisZhsqLxdh
            that.person_jhrdh = res.bisZhsqJhrdh
            that.person_grbh = res.bisZhsqGrbh
            that.person_ybkh = res.bisZhsqYbkh
            that.person_ybssqx = this.dict.label.ccstcqh[res.bisZhsqSnryYbssqx]
            that.person_cblx = res.bisZhsqCblx
            that.bis_zhsq_sndj = res.bisZhsqSndj
            that.bis_zhsq_dykkrq = res.bisZhsqDykkrq.substring(0, 10)
            that.bis_zhsq_dyjsrq = res.bisZhsqDyjsrq.substring(0, 10)
            that.bis_zhsq_xsdyq = res.bisZhsqXsdyq
            const bornDay = that.person_sfz.substring(6, 14)
            that.person_csrq = bornDay.substring(0, 4) + '年' + bornDay.substring(4, 6) + '月' + bornDay.substring(6, 8) + '日'
            that.crud.query.blurry = that.person_sfz
            that.crud.toQuery()
          } else {
            that.$notify({
              title: '长者没有复核通过的照护待遇',
              type: 'warning',
              duration: 2500
            })
          }
        })
      }).catch(err => {
        this.fullscreenLoading = false
        console.log('err: {} ', err)
      })
    },
    testQuery() {
      getZhid({ sfz: this.person_sfz }).then(res => {
        console.log('getZhid:', res)
        if (res !== '') {
          this.defualtQuery = true
          this.person_sfz = res.bisZhsqSnrySfz
          this.person_xm = res.bisZhsqSnryXm
          this.person_xb = res.bisZhsqSnryXb
          this.person_nl = res.bisZhsqNl
          this.person_zhid = res.bisZhsqId
          this.person_lxdh = res.bisZhsqLxdh
          this.person_jhrdh = res.bisZhsqJhrdh
          this.person_grbh = res.bisZhsqGrbh
          this.person_ybkh = res.bisZhsqYbkh
          this.person_ybssqx = this.dict.label.ccstcqh[res.bisZhsqSnryYbssqx]
          this.person_cblx = res.bisZhsqCblx
          this.bis_zhsq_sndj = res.bisZhsqSndj
          this.bis_zhsq_dykkrq = res.bisZhsqDykkrq.substring(0, 10)
          this.bis_zhsq_dyjsrq = res.bisZhsqDyjsrq.substring(0, 10)
          this.bis_zhsq_xsdyq = res.bisZhsqXsdyq
          const bornDay = this.person_sfz.substring(6, 14)
          this.person_csrq = bornDay.substring(0, 4) + '年' + bornDay.substring(4, 6) + '月' + bornDay.substring(6, 8) + '日'
          this.crud.query.blurry = this.person_sfz
          this.crud.toQuery()
        } else {
          this.$notify({
            title: '长者没有复核通过的照护待遇',
            type: 'warning',
            duration: 2500
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.user-info {
  padding-left: 0;
  list-style: none;
  li{
    border-bottom: 1px solid #F0F3F4;
    padding: 11px 0;
    font-size: 13px;
  }
  .user-right {
    float: right;
    a{
      color: #317EF3;
    }
  }
}
</style>

